<template>
  <div>
    <el-container id="container">
      <el-main>
        <div id="login-box">
          <div class="header">
            {{ system.website_chinese_title }}
            <p>{{ system.website_english_title }}</p>
          </div>
          <div class="main">
            <el-tabs class="login-tabs" v-model="activeName" :stretch="true" @tab-click="handleClick">
              <el-tab-pane :label="i18n('login.scan_login')" name="scan">
                <scan/>
              </el-tab-pane>
              <el-tab-pane :label="i18n('login.account_login')" name="account">
                <account/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="copyright" v-html="system.copyright"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup name="login">
  import { useBase } from "@/hooks/base/useBase";
  import { useStore } from "@/hooks/store/useStore";

  import Account from '@/components/login/account'
  import Scan from '@/components/login/scan'

  const { i18n } = useBase()
  const { system } = useStore()

  const activeName = ref('scan')

  const handleClick = (tab, event) => {
    console.log(tab, event)
  }
</script>

<style scoped lang="scss">
  #container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #f6f8fb;

    #login-box {
      position: absolute;
      width: 380px;
      min-height: 380px;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 0 0 #ccc;
      box-shadow: 0 4px 14px 0 rgba(206, 207, 209, 0.5);
      padding: 10px 20px;

      .header {
        width: 100%;
        height: 90px;
        font-size: 22px;
        margin: 25px 0 0 0;
        text-align: center;

        p {
          font-size: 14px;
          margin-top: 10px;
        }
      }

      .login-tabs {
        margin-bottom: 20px;
      }
    }

    .copyright {
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      width: 70%;
      text-align: center;
      margin: 0 auto;
      font-size: 12px;
      color: #b1a0a0;
    }
  }
</style>
